import React, { useMemo } from 'react';
import { Tag } from 'antd';

import { getLang } from '@/services/consts';

export type LangTagProps = {
  value: string | undefined;
};

export const LangTag: React.FC<LangTagProps> = (props) => {
  if (!props.value || props.value == '') {
    return null;
  }

  const renderTag = useMemo(() => {
    //console.log('id: ', props);

    const { value } = props;

    const lang = getLang(value);
    if (lang) {
      return (
        <Tag color="blue" key={value} title={value}>
          {lang.label}
        </Tag>
      );
    }
    return null;
  }, [props.value]);

  return <>{renderTag}</>;
};

export type LangTagsProps = {
  values: string[] | undefined;
};

const LangTags: React.FC<LangTagsProps> = (props) => {
  if (!props.values || props.values.length < 1) {
    return null;
  }

  const renderTags = useMemo(() => {
    return props.values?.map((item) => (
      <LangTag key={item} value={item}></LangTag>
    ));
  }, [props.values]);

  return <>{renderTags}</>;
};

export default LangTags;
